<template>
  <div class="font">
    叩丁狼电商运营平台
    <el-icon size="21" @click="useStore.changAsideIsShow()">
      <Menu />
    </el-icon>
  </div>
  <el-dropdown @command="commandHandle">
    <span class="el-dropdown-link">
      {{ useStore.username }}
      <el-icon class="el-icon--right"><arrow-down /></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="index">首页</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { usePinia } from "@/store/index";
import { ArrowDown, Menu } from "@element-plus/icons-vue";
import { clear } from "console";
import { ElMessage } from "element-plus";
import { logout } from "@/common";
import { logoutApi } from "../api";
const useStore = usePinia();
const router = useRouter();
const commandHandle = (command: string) => {
  if (command === "index") {
    router.push("/index");
  } else if (command === "logout") {
    // 退出登录
    // 删除token
    logout(
      () => {
        logoutApi()
      },
      () => {
        ElMessage.success("退出登录");
      }
    );
  }
};
</script>

<style lang="less" scoped>
.font {
  display: flex;
  justify-content: space-between;
  align-items: center;

  :deep(.el-icon) {
    margin-left: 20px;
  }
}
</style>
